<template>
  <scroll-view class="scroll-container" scroll-y>
    <view class="page-container">
      <!-- 1. 顶部轮播图 -->
      <view class="swiper-container">
        <swiper 
          class="swiper" 
          autoplay 
          interval="3000" 
          duration="500" 
          circular
          indicator-dots
          indicator-color="rgba(255,255,255,0.5)"
          indicator-active-color="#ffffff"
        >
          <swiper-item v-for="(item, index) in 5" :key="index">
            <image 
              class="swiper-image" 
              :src="`/static/city${index + 1}.jpg`" 
              mode="widthFix"
              alt="城市风景图"
            ></image>
          </swiper-item>
        </swiper>
        
        <!-- 轮播图标题浮层 -->
        <view class="swiper-title">
          <text class="city-name">泉州 · 海上丝绸之路起点</text>
        </view>
      </view>

      <!-- 2. 城市介绍 -->
      <view class="city-intro section">
        <text class="section-title">城市介绍</text>
        <view class="rich-text">
          <text class="intro-text">
            <text class="bold">泉州</text> 是福建省下辖的一个地级市，是联合国教科文组织认定的"海上丝绸之路"起点城市，也是首批国家历史文化名城。
            \n\n这座城市拥有 <text class="highlight">开元寺</text>、<text class="highlight">清净寺</text> 等众多历史古迹，展现了多元文化的交融。
            \n\n泉州作为古代东方第一大港，曾是中国与世界交流的重要窗口，如今仍保留着丰富的海洋文化遗产。
          </text>
        </view>
      </view>

      <!-- 3. 探索进度 -->
      <view class="exploration-progress section">
        <text class="section-title">探索进度</text>
        <view class="progress-container">
          <view class="custom-progress-bg">
            <view class="custom-progress-bar" :style="{ width: progressPercent + '%' }"></view>
          </view>
          <text class="progress-text">当前进度: {{ progressPercent }}%</text>
          
          <!-- 进度里程碑 -->
          <view class="progress-milestones">
            <view class="milestone" :class="{ active: progressPercent >= 25 }">
              <view class="milestone-dot"></view>
              <text class="milestone-text">景点探索</text>
            </view>
            <view class="milestone" :class="{ active: progressPercent >= 50 }">
              <view class="milestone-dot"></view>
              <text class="milestone-text">美食体验</text>
            </view>
            <view class="milestone" :class="{ active: progressPercent >= 75 }">
              <view class="milestone-dot"></view>
              <text class="milestone-text">文化了解</text>
            </view>
            <view class="milestone" :class="{ active: progressPercent >= 100 }">
              <view class="milestone-dot"></view>
              <text class="milestone-text">深度探索</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 6. 媒体展示 -->
      <view class="media-section section">
        <text class="section-title">城市风光</text>
        <view class="video-container">
          <video 
            class="city-video"
            :src="videoUrl"
            poster="/static/video-poster.jpg"
            controls
            loop
            muted
            alt="城市宣传视频"
          ></video>
          
          <!-- 图片网格 -->
          <view class="image-grid">
            <image 
              class="grid-img" 
              src="/static/city1.jpg" 
              mode="aspectFill"
              alt="城市图片"
            ></image>
            <image 
              class="grid-img" 
              src="/static/city2.jpg" 
              mode="aspectFill"
              alt="城市图片"
            ></image>
            <image 
              class="grid-img" 
              src="/static/city3.jpg" 
              mode="aspectFill"
              alt="城市图片"
            ></image>
          </view>
        </view>
      </view>

      <!-- 4. 城市选择 -->
      <view class="city-picker section">
        <text class="section-title">选择城市</text>
        <view class="picker-container">
          <picker 
            mode="multiSelector" 
            :range="cityOptions" 
            @change="onCityChange"
            :value="selectedCityIndices"
          >
            <view class="picker-view">
              <text class="picker-text">
                {{ selectedProvince }} - {{ selectedCity }} - {{ selectedDistrict }}
              </text>
              <image 
                class="arrow-icon" 
                src="/static/arrow-right.png" 
                mode="widthFix"
                alt="箭头图标"
              ></image>
            </view>
          </picker>
        </view>
      </view>

      <!-- 5. 偏好设置 -->
      <view class="preferences section">
        <text class="section-title">偏好设置</text>
        
        <!-- 出行方式选择 -->
        <view class="preference-item">
          <text class="preference-label">出行方式</text>
          <view class="radio-group">
            <radio-group @change="onTransportChange">
              <view class="radio-item" v-for="(item, index) in transportOptions" :key="index">
                <radio :value="item.value" :checked="item.checked"></radio>
                <text class="radio-text">{{ item.label }}</text>
              </view>
            </radio-group>
          </view>
        </view>
        
        <!-- 推荐景点开关 -->
        <view class="preference-item switch-item">
          <text class="preference-label">显示推荐景点</text>
          <switch 
            checked 
            color="#1677ff"
            @change="onRecommendChange"
          ></switch>
        </view>
        
        <!-- 探索半径滑块 -->
        <view class="preference-item slider-item">
          <text class="preference-label">探索半径: {{ radius }} km</text>
          <slider 
            min="1" 
            max="50" 
            :value="radius" 
            step="1" 
            activeColor="#1677ff"
            backgroundColor="#E5E7EB"
            @change="onRadiusChange"
          ></slider>
          <view class="slider-range">
            <text class="range-text">1km</text>
            <text class="range-text">50km</text>
          </view>
        </view>
      </view>

      <!-- 底部留白 -->
      <view class="bottom-space"></view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      // 城市选择器数据
      cityOptions: [
        ['北京市', '上海市', '广东省', '福建省'],
        ['北京市', '上海市', '广州市', '深圳市', '泉州市'],
        ['东城区', '西城区', '朝阳区', '海淀区', '鲤城区', '丰泽区']
      ],
      selectedCityIndices: [3, 4, 4], // 默认选择泉州的鲤城区
      selectedProvince: '福建省',
      selectedCity: '泉州市',
      selectedDistrict: '鲤城区',
      
      // 出行方式选项
      transportOptions: [
        { label: '公交', value: 'bus', checked: true },
        { label: '自驾', value: 'drive', checked: false },
        { label: '步行', value: 'walk', checked: false }
      ],
      
      // 探索半径
      radius: 10,
      
      // 视频地址
      videoUrl: '/static/city-video.mp4',
      
      // 探索进度百分比
      progressPercent: 60
    }
  },
  methods: {
    // 城市选择变化
    onCityChange(e) {
      const indices = e.detail.value;
      this.selectedCityIndices = indices;
      this.selectedProvince = this.cityOptions[0][indices[0]];
      this.selectedCity = this.cityOptions[1][indices[1]];
      this.selectedDistrict = this.cityOptions[2][indices[2]];
    },
    
    // 出行方式变化
    onTransportChange(e) {
      const value = e.detail.value;
      this.transportOptions.forEach(option => {
        option.checked = option.value === value;
      });
    },
    
    // 推荐景点开关变化
    onRecommendChange(e) {
      console.log('显示推荐景点: ', e.detail.value);
    },
    
    // 探索半径变化
    onRadiusChange(e) {
      this.radius = e.detail.value;
    }
  }
}
</script>

<style scoped>
.scroll-container {
  width: 100%;
  height: 100vh;
  background-color: #F8FAFC;
}

.page-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 轮播图样式 */
.swiper-container {
  width: 100%;
  position: relative;
}

.swiper {
  width: 100%;
  height: 360rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 轮播图标题 */
.swiper-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx 20rpx;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.city-name {
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

/* 通用区块样式 */
.section {
  width: 92%;
  background-color: #FFFFFF;
  border-radius: 18rpx;
  padding: 30rpx;
  margin-top: 25rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
}

.section:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 25rpx;
  display: block;
  padding-bottom: 15rpx;
  border-bottom: 1px solid #F1F5F9;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1rpx;
  width: 50rpx;
  height: 4rpx;
  background-color: #1677ff;
  border-radius: 2rpx;
}

/* 城市介绍样式 */
.rich-text {
  font-size: 28rpx;
  line-height: 1.7;
  color: #475569;
}

.bold {
  font-weight: 600;
  color: #1E293B;
}

.highlight {
  color: #1677ff;
  font-weight: 500;
}

/* 探索进度样式 */
.progress-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.custom-progress-bg {
  width: 100%;
  height: 14rpx;
  background-color: #E5E7EB;
  border-radius: 7rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.custom-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1677ff 0%, #36bffa 100%);
  border-radius: 7rpx;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text {
  font-size: 28rpx;
  color: #475569;
  margin-bottom: 25rpx;
  font-weight: 500;
}

/* 进度里程碑 */
.progress-milestones {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;
}

.milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.milestone-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #CBD5E1;
  margin-bottom: 8rpx;
}

.milestone-text {
  font-size: 22rpx;
  color: #94A3B8;
}

.milestone.active .milestone-dot {
  background-color: #1677ff;
  box-shadow: 0 0 0 6rpx rgba(22, 119, 255, 0.1);
}

.milestone.active .milestone-text {
  color: #1677ff;
  font-weight: 500;
}

/* 城市选择器样式 */
.picker-container {
  width: 100%;
}

.picker-view {
  width: 100%;
  height: 90rpx;
  background-color: #F1F5F9;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25rpx;
  transition: background-color 0.2s ease;
}

.picker-view:active {
  background-color: #E2E8F0;
}

.picker-text {
  font-size: 28rpx;
  color: #1E293B;
}

.arrow-icon {
  width: 32rpx;
  height: 32rpx;
  opacity: 0.6;
}

/* 偏好设置样式 */
.preference-item {
  width: 100%;
  padding: 22rpx 0;
  border-bottom: 1px solid #F1F5F9;
}

.preference-item:last-child {
  border-bottom: none;
}

.preference-label {
  font-size: 28rpx;
  color: #1E293B;
  display: block;
  margin-bottom: 15rpx;
}

/* 出行方式选择 */
.radio-group {
  display: flex;
  gap: 40rpx;
}

.radio-item {
  display: flex;
  align-items: center;
}

.radio-text {
  font-size: 26rpx;
  color: #475569;
  margin-left: 10rpx;
}

/* 重写radio样式 */
::v-deep radio {
  color: #1677ff !important;
}

/* 开关样式 */
.switch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 滑块样式 */
.slider-item {
  display: flex;
  flex-direction: column;
}

.slider-range {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}

.range-text {
  font-size: 24rpx;
  color: #94A3B8;
}

/* 媒体展示样式 */
.video-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.city-video {
  width: 100%;
  height: 320rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

/* 图片网格 */
.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15rpx;
  margin-top: 15rpx;
}

.grid-img {
  width: 100%;
  height: 180rpx;
  border-radius: 10rpx;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.grid-img:active {
  transform: scale(0.95);
}

/* 底部留白 */
.bottom-space {
  height: 40rpx;
}
</style>